
<template>
    <div>
           <Card>
               <Form ref="modalForm" :model="data" :rules="ruls" :label-width="80" style="width: 25%;text-align: center;margin: 0">
                   <FormItem label="原密码" prop="userName">
                       <Input v-model.trim="data.oldPassword" />
                   </FormItem>
                   <FormItem label="新密码" prop="password">
                       <Input type="password" v-model.trim="data.password" />
                   </FormItem>
                   <FormItem label="确认密码" prop="rePassword">
                       <Input type="password" v-model.trim="data.rePassword" />
                   </FormItem>

               </Form>
               <div style="margin-left: 11rem" >
                   <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                   <Button type="primary" :loading="loading" @click="ok">确定</Button>
               </div>
           </Card>

    </div>
</template>
<script>
    import { post } from '@/libs/axios-cfg'
    export default {
        data() {
            const validateConfirmPwd = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.data.password) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                data: {
                    oldPassword: "",
                    password: "",
                    rePassword: ""
                },
                ruls: {
                    oldPassword: [
                        { required: true, message: "请填写密码"},
                        {pattern:/^(\w){6,18}$/,message:'密码应为[A-Za-z0-9_]组成的6-18位字符'}
                    ],
                    password: [
                        { required: true, message: "请填写新密码"},
                        {pattern:/^(\w){6,18}$/,message:'密码应为[A-Za-z0-9_]组成的6-18位字符'}
                    ],
                    rePassword: [{ validator: validateConfirmPwd }],
                }
            };
        },
        props: {
        },
        methods: {
            /**
             * @description 关闭Modal
             * @param reload 是否重新加载数据
             */
            cancel(reload = false) {
                this.$emit("cancel", "add", reload);
            },
            /**
             * @description 确定按钮单击回调
             */
            ok() {
                this.$refs.modalForm.validate(valid => {
                    if (valid) {

                        this.modifyUser(data)
                    }
                });
            },
            /**
             * @description 添加用户数据请求
             */
            async modifyUser(data){
                this.loading = true;
                try {

                } catch (error) {
                    this.$throw(error)
                }
                this.loading = false;
            }
        }
    };
</script>

